<template>
  <section id="weeky">
    <section class="btn-list" ref="week">
      <a-dropdown>
        <template #overlay>
          <a-menu @click="handleGradeClick">
            <a-menu-item v-for="(item,index) in gradeArr" :key="item.value" align="center">{{
                item.label
              }}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button v-if="roleId == 1" :class="isSelectGrade ? 'is-select':''">
          <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <g>
              <g>
                <rect fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="48" height="48" stroke-width="3"
                      stroke="none"
                      fill-rule="evenodd"/>
                <polygon stroke="#98A6AD" stroke-width="3" fill="none" fill-rule="nonzero" stroke-linejoin="round"
                         points="6 9 20.4 25.8177778 20.4 38.4444444 27.6 42 27.6 25.8177778 42 9"/>
              </g>
            </g>
          </svg>
          <p>筛选年级</p>
        </a-button>
      </a-dropdown>
      <a-button @click="visibleWeek=true" :class="isSelectWeek ? 'is-select':''">
        <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <g>
            <g>
              <rect fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="48" height="48" stroke-width="3" stroke="none"
                    fill-rule="evenodd"/>
              <polygon stroke="#98A6AD" stroke-width="3" fill="none" fill-rule="nonzero" stroke-linejoin="round"
                       points="6 9 20.4 25.8177778 20.4 38.4444444 27.6 42 27.6 25.8177778 42 9"/>
            </g>
          </g>
        </svg>
        <p>筛选周数</p>
      </a-button>
      <a-button @click="handleReleaseClick" :class="isSelect === 0 ? 'is-select':''" v-if="roleId == 1">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
             style="transform: rotate(180deg)">
          <path d="M8 3.33325V12.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12.6666 8L7.99992 12.6667L3.33325 8" stroke="#98A6AD" stroke-linecap="round"
                stroke-linejoin="round"/>
        </svg>
        <p>已发布</p>
      </a-button>
      <a-button @click="handleDeleteClick" :class="isSelect === 1? 'is-select':''" v-if="roleId == 1">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M5.3335 3.99992V2.66659C5.3335 2.31296 5.47397 1.97382 5.72402 1.72378C5.97407 1.47373 6.31321 1.33325 6.66683 1.33325H9.3335C9.68712 1.33325 10.0263 1.47373 10.2763 1.72378C10.5264 1.97382 10.6668 2.31296 10.6668 2.66659V3.99992M12.6668 3.99992V13.3333C12.6668 13.6869 12.5264 14.026 12.2763 14.2761C12.0263 14.5261 11.6871 14.6666 11.3335 14.6666H4.66683C4.31321 14.6666 3.97407 14.5261 3.72402 14.2761C3.47397 14.026 3.3335 13.6869 3.3335 13.3333V3.99992H12.6668Z"
              stroke="#C7C7C7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M6.6665 7.33325V11.3333" stroke="#C7C7C7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9.3335 7.33325V11.3333" stroke="#C7C7C7" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p>已删除</p>
      </a-button>
    </section>
    <section class="weeky-list">
      <a-table
          :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
          :data-source="weeklyArr"
          :loading="isloading"
          :pagination="false"
          :scroll="{ y: 640 }"
          :rowKey="(record, index) => record.id"
          :class="isEmpty ? '' :'weeky-empty'"
      >
        <a-table-column key="date" title="日期" data-index="date" align="center" width="210px"/>
        <a-table-column key="title" title="标题" data-index="title" align="center" width="425px"/>
        <a-table-column key="publisher" title="发表人" data-index="username" align="center" width="210px"/>
        <a-table-column key="publisher" title="周数" data-index="weeks" align="center" width="210px">
          <template #default="{ text: status }">
            <span>第{{ status }}周</span>
          </template>
        </a-table-column>
        <a-table-column key="status" title="状态" data-index="status" align="center" width="210px">
          <template #default="{ text: status }">
            <span v-if="status==='0'">
              <a-tag color="blue">已发表</a-tag>
            </span>
            <span v-else>
               <a-tag color="red">已删除</a-tag>
            </span>
          </template>
        </a-table-column>
        <a-table-column key="operation" title="操作" data-index="operation" align="center" width="210px">
          <template #default="{ record }">
            <section class="operation" ref="operation">
              <a-button type="primary" @click="showWeeky(record)" v-if="roleId == 1">查看</a-button>
              <a-button type="primary" @click="editWeeky(record)" v-if="roleId != 1">编辑</a-button>
              <a-button type="primary" danger @click="deleteWeekyBox(record)">删除</a-button>
            </section>
          </template>
        </a-table-column>
      </a-table>
    </section>
  </section>
  <!--  查看周报-->
  <a-modal v-model:visible="visibleWeeky" :footer="null" :getContainer="$refs.operation" class="weeky" width="782px"
           @cancel="closeWeekly">
    <h1 class="weeky-title">
      <a-skeleton active :loading="weeklyLoading" :paragraph="false"/>
      {{ weekyInfo.title }}
    </h1>
    <section class="weeky-author">
      <a-skeleton active :loading="weeklyLoading" :paragraph="false"/>
      {{ weekyInfo.username }}
    </section>
    <section class="weeky-content">
      <a-skeleton active :loading="weeklyLoading"/>
      <section v-html="weekyInfo.content"></section>
    </section>
    <section class="weeky-button">
      <a-button @click="visibleWeeky=false">取消</a-button>
    </section>
  </a-modal>
  <!--  删除周报-->
  <a-modal v-model:visible="visibleDeleteWeeky" :footer="null" :getContainer="$refs.operation" width="374px">
    <section style="text-align: center">
      <h2 class="modal-title">是否确认删除此周报</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleDeleteWeeky=false">取消</a-button>
      <a-button type="primary" @click="deleteWeeky" :loading="deleteLoad">确定</a-button>
    </section>
  </a-modal>
  <!--  筛选周数-->
  <a-modal v-model:visible="visibleWeek" :footer="null" :getContainer="$refs.week" width="100%" :mask="false">
    <section style="text-align: center">
      <a-input v-model:value="selectWeek" placeholder="请输入周数" type="number"/>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="handleSelectWeek">筛选</a-button>
      <a-button type="primary" @click="resetSelect">重置</a-button>
    </section>
  </a-modal>
  <!--  编辑周报-->
  <a-modal v-model:visible="visibleEditWeek" :footer="null" width="1270px" @cancel="quitEditWeeky">
    <router-view></router-view>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, reactive, toRefs, onMounted, computed, watch} from 'vue'
import $store from "store/index"
import {message} from "ant-design-vue"
import router from "@/router";

export default defineComponent({
  name: "allWeeky",
  setup() {
    const {proxy} = getCurrentInstance()
    let isloading = ref(true)
    let weeklyLoading = ref(true)
    let deleteLoad = ref(false)
    let weeklyArr = ref([])
    let getUserId = ref("")
    let visibleDeleteWeeky = ref(false)
    let visibleWeeky = ref(false)
    let visibleWeek = ref(false)
    let visibleEditWeek = ref(false)
    let isEmpty = ref(false)
    let isSelectWeek = ref(false)
    let isSelectGrade = ref(false)
    let roleId = ref("")
    let weekyInfo = reactive({
      username: "",
      title: "",
      content: ""
    })
    let gradeArr = ref("")
    let isSelect = ref("")
    let selectWeek = ref("")
    let gradeId = ref(0)
    let weekyId = ref('')

    onMounted(() => {
      roleId.value = $store.state.userInfo.role_id
      router.push("/backstage/allWeekly")
      if (roleId.value === 1) {
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {}).then(res => {
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
          isloading.value = false
        })
      } else {
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {}).then(res => {
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
          isloading.value = false
        })
      }

      proxy.$request(proxy.$getRoute(29).route_method, proxy.$getRoute(29).route_url, {}).then(res => {
        gradeArr.value = res.data
        gradeArr.value.unshift({value: 0, label: "全部"})
      })
    })

    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    //查看周报
    const showWeeky = (record) => {
      visibleWeeky.value = true
      proxy.$request(proxy.$getRoute(26).route_method, proxy.$getRoute(26).route_url.split('{id}')[0] + record.id, {}).then(res => {
        weekyInfo.title = res.data.title
        weekyInfo.username = res.data.username
        weekyInfo.content = res.data.content
        weeklyLoading.value = false
      })
    }
    //显示删除周报
    const deleteWeekyBox = (record) => {
      visibleDeleteWeeky.value = true
      getUserId.value = record
    }
    //删除周报
    const deleteWeeky = () => {
      deleteLoad.value = true
      let requset = ''
      if (roleId.value == 1) {
        requset = proxy.$request(proxy.$getRoute(25).route_method, proxy.$getRoute(25).route_url.split('{weekly_id}')[0] + getUserId.value.id, {})
      } else {
        requset = proxy.$request(proxy.$getRoute(42).route_method, proxy.$getRoute(42).route_url.split('{weekly_id}')[0] + getUserId.value.id, {})
      }

      requset.then(res => {
        deleteLoad.value = false
        visibleDeleteWeeky.value = false
        weeklyArr.value = []
        isloading.value = true
        isEmpty.value = false
        message.success('删除成功')
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
          grades: gradeId.value,
          week: selectWeek.value,
          is_del: isSelect.value,
        }).then(res => {
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
          isloading.value = false
        })
      })
    }
    //筛选年级
    const handleGradeClick = (e) => {
      if (e.key != 0) {
        isSelectGrade.value = true
      } else {
        isSelectGrade.value = false
      }
      gradeId.value = e.key
      weeklyArr.value = []
      isloading.value = true
      isEmpty.value = false
      proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
        grades: gradeId.value,
        week: selectWeek.value,
        is_del: isSelect.value,
      }).then(res => {
        isloading.value = false
        weeklyArr.value = res.data
        if (!weeklyArr.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
      })
    }
    // 筛选发布
    const handleReleaseClick = () => {
      if (isSelect.value !== 0) {
        isSelect.value = 0
        weeklyArr.value = []
        isloading.value = true
        isEmpty.value = false
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
          grades: gradeId.value,
          week: selectWeek.value,
          is_del: isSelect.value,
        }).then(res => {
          isloading.value = false
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
        }).catch(res => {
          isEmpty.value = true
        })
      } else {
        isSelect.value = ""
        weeklyArr.value = []
        isloading.value = true
        isEmpty.value = false
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
          grades: gradeId.value,
          week: selectWeek.value,
          is_del: isSelect.value,
        }).then(res => {
          isloading.value = false
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
        }).catch(res => {
          isEmpty.value = true
        })
      }

    }
    // 筛选删除
    const handleDeleteClick = () => {
      if (isSelect.value !== 1) {
        isSelect.value = 1
        weeklyArr.value = []
        isloading.value = true
        isEmpty.value = false
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
          grades: gradeId.value,
          week: selectWeek.value,
          is_del: isSelect.value,
        }).then(res => {
          isloading.value = false
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
        }).catch(res => {
          isEmpty.value = true
        })
      } else {
        isSelect.value = ""
        weeklyArr.value = []
        isloading.value = true
        isEmpty.value = false
        proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
          grades: gradeId.value,
          week: selectWeek.value,
          is_del: isSelect.value,
        }).then(res => {
          isloading.value = false
          weeklyArr.value = res.data
          if (!weeklyArr.value.length) isEmpty.value = true
        }).catch(res => {
          isEmpty.value = true
        })
      }
    }
    //重置筛选
    const resetSelect = () => {
      isloading.value = true
      weeklyArr.value = []
      selectWeek.value = ""
      proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
        grades: gradeId.value,
        week: selectWeek.value,
        is_del: isSelect.value,
      }).then(res => {
        isloading.value = false
        weeklyArr.value = res.data
        visibleWeek.value = false
        isSelectWeek.value = false
        if (!weeklyArr.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
      })
    }
    //筛选周数
    const handleSelectWeek = () => {
      isloading.value = true
      weeklyArr.value = []
      proxy.$request(proxy.$getRoute(20).route_method, proxy.$getRoute(20).route_url, {
        grades: gradeId.value,
        week: selectWeek.value,
        is_del: isSelect.value,
      }).then(res => {
        isloading.value = false
        weeklyArr.value = res.data
        visibleWeek.value = false
        isSelectWeek.value = true
        if (!weeklyArr.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
      })
    }
    const editWeeky = (record) => {
      $store.commit("setWeekyId", record.id)
      visibleEditWeek.value = true
      router.push("/backstage/allWeekly/editArea")
    }
    const quitEditWeeky = () => {
      $store.commit("setWeekyId", "")
      visibleEditWeek.value = false
      router.push("/backstage/allWeekly")
    }
    const closeWeekly = () => {
      visibleWeeky.value = false
      weekyInfo.title = ""
      weekyInfo.content = ""
      weekyInfo.username = ""

      weeklyLoading.value = true
    }

    return {
      weeklyArr,
      hasSelected,
      ...toRefs(state),
      isloading,
      weeklyLoading,
      onSelectChange,
      deleteWeeky,
      deleteLoad,
      visibleDeleteWeeky,
      visibleWeek,
      visibleWeeky,
      visibleEditWeek,
      deleteWeekyBox,
      showWeeky,
      editWeeky,
      quitEditWeeky,
      weekyInfo,
      gradeArr,
      handleGradeClick,
      handleReleaseClick,
      handleDeleteClick,
      handleSelectWeek,
      closeWeekly,
      isEmpty,
      isSelect,
      selectWeek,
      resetSelect,
      isSelectWeek,
      isSelectGrade,
      roleId
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#weeky {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list button {
    display: flex;
    align-items: center;
    width: 106px;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }


  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 10px;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .weeky-empty .ant-empty {
    display: none !important;
  }

  .weeky-empty .ant-table-placeholder {
    height: 100px;
  }

  .weeky-list .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background: @selectColor;
  }

  .weeky-list .ant-checkbox-checked .ant-checkbox-inner {
    border-color: @selectColor;
    background: @selectColor;
  }

  .weeky-list .ant-table-row-cell-break-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .weeky-list {
    border-radius: 8px;
    overflow: hidden;
  }

  .operation {
    display: flex;
    gap: 10px;
  }

  .operation button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child {
    background: #6777EF;
  }

  .operation button:last-child {
    background: #EB5757;
  }

  .is-select p {
    color: @selectColor !important;
  }

  .is-select svg path {
    stroke: @selectColor;
  }

  .is-select svg polygon {
    stroke: @selectColor;
  }

  .weeky .ant-modal-body > h1,
  .weeky .ant-modal-body > section:not(.weeky-button) {
    width: 100%;
    text-align: left;
    padding: 10px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px;
    border: 1px solid #EEEEEE;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: bold;
  }

  .weeky .weeky-title {
    font-size: 20px;
    color: #262626;
    line-height: 23px;
    margin: 0;
  }

  .weeky .weeky-author {
    font-size: 16px;
    color: #465059;
    line-height: 19px;
  }

  .weeky .weeky-content {
    font-size: 14px;
    color: #262626;
    line-height: 28px;
    white-space: normal;
    list-style-position: inside;
  }

  .weeky .weeky-content p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .weeky .weeky-button {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: end;
  }

  .weeky .weeky-button button {
    background: #F2F3F5 !important;
    color: #000;
  }

  .btn-list .ant-modal-content {
    position: absolute;
    left: 21%;
    top: 95px;
    width: 200px;
  }

  .btn-list .ant-modal-root .ant-modal-close {
    display: none;
  }

  .btn-list .ant-modal-body {
    padding: 15px;
  }

  .btn-list .modal-button {
    justify-content: space-between;
  }

  .btn-list .modal-button button {
    width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  .btn-list .modal-button button:first-child {
    background: @selectColor;
    color: #fff;
  }

  .btn-list .modal-button button:last-child {
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px #00000004;
    color: #000;
  }

  .ant-input::-webkit-outer-spin-button,
  .ant-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}
</style>
